<template>
  <view class="progress-bar">
    <block v-for="(itm, idx) in setpList" :key="idx">
      <view :class="`item ${itm.setp === activeSetp && 'active'}`">
        <view class="num-box">
          <view class="count">{{ itm.setp }}</view>
        </view>
        <view :class="`title ${itm.setp <= activeSetp && 'color-black'}`">{{ itm.title }}</view>
      </view>
      <block v-if="idx < (setpList.length - 1)">
        <view class="indicate" v-if="itm.setp < activeSetp" style="background-color:#fff"></view>
        <view class="indicate" v-if="itm.setp > activeSetp" style="background-color:rgba(255, 255, 255, 0.4)"></view>
        <image class="indicate tongxing" :src="getImageSrc('static/icons/icon-step-tongxing.png')" v-if="itm.setp === activeSetp">
        </image>
      </block>
    </block>
  </view>
</template>

<script setup>
import { getImageSrc } from '@/path/until';
const { activeSetp, setpList } = defineProps({
  activeSetp: Number,
  setpList: Array,
})
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
